<template>
  <page-header-wrapper>
    <GlobalSearch :list="searchList" @search="handleSearch"> </GlobalSearch>
    <a-card :bordered="false">
      <div class="table-header m-b-24">

      </div>
      <s-table ref="table" size="default" :rowKey="(record, index) => index" :columns="columns" :data="loadData">
        <div slot="tabAction">
          <buttonSelect
            v-model="typeSelect"
            :options="[
              { value: 'all', label: '全部(100)' },
              { value: 'fh', label: '符合(20)' },
              { value: 'bfh', label: '不符合(20)' },
            ]"
          ></buttonSelect>
        </div>
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }} </span>
        <span slot="spjg" slot-scope="text" :class="auditColor(text)">{{ text }}</span>
        <template v-for="key in ['qx','jdbsc','ydyy']" :slot="key" slot-scope="text">
          <ellipsis :key="key" :length="14" >{{ text }}</ellipsis>
        </template>
        <div slot="action" slot-scope="text, record, index">
          <y-button type="link" @click="handleDetail(index)">查看</y-button>
        </div>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, Ellipsis, buttonSelect } from '@/components'
export default {
  components: {
    STable,
    Ellipsis,
    buttonSelect
  },
  computed: {
    auditColor () {
      return function (text) {
        const classMap = new Map([
          ['符合', 'text-success'],
          ['不符合', 'text-error'],
          ['未审核', 'text-warning']
        ])
        return classMap.get(text)
      }
    }
  },
  data () {
    return {
      typeSelect: 'all',
      searchList: [
        {
          label: '申请编号',
          fields: 'sqbh',
          type: 'input',
          props: {
            placeholder: '请输入申请编号'
          }
        },
        {
          label: '申请人姓名',
          fields: 'sqrxm',
          type: 'input',
          props: {
            placeholder: '请输入申请人姓名'
          }
        },
        {
          label: '身份证号',
          fields: 'sfz',
          type: 'input',
          props: {
            placeholder: '请输入身份证号'
          }
        },
        {
          label: '市级审核人',
          fields: 'sjsh',
          type: 'select',
          props: {
            placeholder: '请选择市级审核人',
            options: [{ value: '张三', label: '张三' }]
          }
        },
        {
          label: '所属部门(区)',
          fields: 'ssbmq',
          type: 'select',
          props: {
            placeholder: '请选择所属部门(区)',
            options: [{ value: '张三', label: '张三' }]
          }
        },
        {
          label: '所属部门(社)',
          fields: 'ssbms',
          type: 'select',
          props: {
            placeholder: '请选择所属部门(社)',
            options: [{ value: '张三', label: '张三' }]
          }
        },
        {
          label: '保障类别',
          fields: 'bzlb',
          type: 'select',
          props: {
            placeholder: '请选择所属部门(社)',
            options: [{ value: '张三', label: '张三' }]
          }
        }
      ],
      columns: [
        {
          title: '序号',
          align: 'center',
          width: '80px',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '申请编号',
          align: 'center',
          dataIndex: 'sqbh'
        },
        {
          title: '申请人',
          align: 'center',
          width: 80,
          dataIndex: 'sqr'
        },
        {
          title: '身份证号',
          width: 176,
          align: 'center',
          dataIndex: 'sfz'
        },
        {
          title: '区县',
          width: 140,
          align: 'center',
          dataIndex: 'qx',
           scopedSlots: { customRender: 'qx' }
        },
        {
          title: '街道办事处',
          width: 140,
          align: 'center',
          dataIndex: 'jdbsc',
           scopedSlots: { customRender: 'jdbsc' }
        },
        {
          title: '核定保障人数',
          align: 'center',
          dataIndex: 'hdbzrs'
        },
        {
          title: '审批结果',
          align: 'center',
          width: 100,
          dataIndex: 'spjg',
          scopedSlots: { customRender: 'spjg' }
        },
        {
          title: '人均面积（㎡）',
          align: 'center',
          dataIndex: 'rjmj'
        },
        {
          title: '保障金额',
          align: 'center',
          width: 100,
          dataIndex: 'nzje'
        },
        {
          title: '异动类型',
          align: 'center',
          width: 100,
          dataIndex: 'ydlx'
        },
        {
          title: '异动原因',
          align: 'center',
          width: 180,
          dataIndex: 'ydyy',
          scopedSlots: { customRender: 'ydyy' }
        },
        {
          title: '操作',
          align: 'center',
          width: '80px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return Promise.resolve({
          data: [
            {
              sqbh: '2022051900012',
              sqr: '杨华',
              sfz: '520113197109040817',
              qx: '白云区住房制度改革领导小组办公室',
              jdbsc: '泉湖街道办事处',
              hdbzrs: '1',
              spjg: '符合',
              rjmj: '0',
              nzje: '450',
              ydlx: '',
              ydyy: ''
            },
            {
              sqbh: '2022054300006',
              sqr: '肖永智',
              sfz: '350781196403076047',
              qx: '双龙航空港经济区住建局',
              jdbsc: '双龙航空港经济区住建局综合处',
              hdbzrs: '1',
              spjg: '不符合',
              rjmj: '85.94',
              nzje: '450',
              ydlx: '退出',
              ydyy: '1、数据异常，更正申请资料'
            }
          ],
          count: 200
        })
      }
    }
  },
  methods: {
    handleSearch (values) {
    },
    handleDetail (index) {
      this.$router.push({
        name: 'assureInformationView',
        params: {
          id: index + 1
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.table-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
